import { Component, useState } from "react";
import "@/assets/style.scss"
import PropTypes from "prop-types"

// ————————————————按钮
function Button(props) {
    let { type, children, onClick } = props
    return (
        <div className="ml-button">
            <span onClick={onClick} className={type}>{children}</span>
        </div>
    )
}
Button.propTypes = {
    children: PropTypes.node,
    type: PropTypes.oneOf(["default", "primary", "danger", "info"]),
    onClick: PropTypes.func
}
Button.defaultProps = {
    children: '按钮',
    type: "default",
    onClick: () => { }
}

// ——————————————————ModalHeader
function ModalHeader(props) {
    let { title, closable, onCancel } = props
    return (
        <div>
            <div>{title}</div>
            <div onClick={onCancel}>{closable && "X"}</div>
        </div>
    )
}

// ——————————————————ModalFooter
function ModalFooter(props) {
    let { type, onCancel, onSubmit, footer } = props
    let renderFooter = () => {
        let btns = [];
        switch (type) {
            case "confirm":
                btns = [
                    <Button onClick={onCancel} key="1">取消</Button>,
                    <Button onClick={onSubmit} type="primary" key="2">确定</Button>
                ]
                break;
            case "danger":
                btns = [
                    <Button onClick={onCancel} key="1">取消</Button>,
                    <Button onClick={onSubmit} type="danger" key="2">删除</Button>
                ]
                break;
            case "info":
                btns = [
                    <Button onClick={onCancel} type="info" key="1">我知道了~</Button>,
                ]
                break;
        }
        return btns
    }

    // if (footer) {
    //     console.log(footer);
    //     return footer()
    // }
    return (
        // renderFooter()
        footer ? footer() : renderFooter()
    )
}


function Modal(props) {
    // 父组件中子标签之间的数据会通过children自动传到子组件的props里
    let { isShow, children, onChange, width } = props;

    // let closeBtn = (e) => {
    //     e.stopPropagation()
    //     onChange()
    // }
    let closeBtnn = (e) => {
        // data-self="layer"会将self:"layer"存储在e.target.dataset里
        // 如果点击的是遮罩层就存在self，可以返回，如果点击弹窗里，就不存在self，不会消失，变相解决事件冒泡
        if (e.target.dataset.self) {
            onChange()
        }
    }
    let nclose = (e) => {
        // 阻止事件冒泡
        e.stopPropagation()
    }
    if (!isShow) {
        return
    }
    return (
        <div className="ml-layer" data-self="layer" onClick={closeBtnn} >
            <div className="ml-modal" style={{ width: `${width}px`, marginLeft: `-${width / 2}px` }} >
                <header>
                    <ModalHeader {...props}></ModalHeader>
                </header>
                <main>{children}</main>
                <footer>
                    <ModalFooter {...props}></ModalFooter>
                </footer>
            </div>
        </div>
    )
}
// 数据校验   .isRequired必须传
Modal.propTypes = {
    title: PropTypes.elementType,
    closable: PropTypes.bool,
    children: PropTypes.node,
    type: PropTypes.oneOf(["confirm", "danger", "info"]),
    onChange: PropTypes.func,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func,
    footer: PropTypes.oneOfType([
        PropTypes.func, PropTypes.bool
    ]),
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string
    ])
}
// 非必传项需要提供的默认值
Modal.defaultProps = {
    title: '默认标题',
    closable: true,
    children: <div>默认内容</div>,
    type: "confirm",
    onChange: () => { },
    onCancel: () => { },
    onSubmit: () => { },
    // footer: () => { },
    footer: false,
    width: 600
}




function PageA() {
    let [isShow, setIsShow] = useState(false)
    let submit = () => {
        setTimeout(() => {
            console.log("submit...");
            setIsShow(false)
        }, 200)
    }
    return (
        <div>
            <button onClick={() => setIsShow(_ => !_)}>打开弹窗</button>
            {/* Modal里的type是弹出框的类型 */}
            <Modal
                isShow={isShow}
                onChange={() => setIsShow(_ => !_)} title={"添加用户"}
                closable
                type="confirm"
                onCancel={() => setIsShow(false)}
                onSubmit={submit}
                // footer={
                //     () => {
                //         return [
                //             <Button type='danger' key="1">残忍离开</Button>,
                //             <Button type='primary' key="2">确定</Button>
                //         ]
                //     }
                // }

                width={550}
            >
                <div>
                    <input type="text" />
                    <div>你确定要添加此用户吗</div>
                </div>
            </Modal>
        </div>
    )
}

export default PageA